import React, {Component} from 'react';

class Count extends Component {

    state={
        count:0
    }


    // 加
    increment=()=>{
        const {value}=this.selectNum
        let {count}=this.state
        count+=value*1
        this.setState({
            count
        })
    }
    // 减
    decrement=()=>{
        const {value}=this.selectNum
        let {count}=this.state
        count-=value*1
        this.setState({
            count
        })
    }
    // 奇数再加
    incrementIfOdd=()=>{
        const {value}=this.selectNum
        let {count}=this.state
        if(count%2!==0){
            count+=value*1
            this.setState({
                count
            })
        }
    }
    // 异步加
    incrementAsync=()=>{
        const {value}=this.selectNum
        let {count}=this.state
        count+=value*1
       setTimeout(()=>{
           this.setState({
               count
           })
       },1000)
    }

    render() {
        return (
            <div>
                <h1>当前求和为:{this.state.count}</h1>
                <select ref={c=>this.selectNum=c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.increment}>+</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.decrement}>-</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.incrementIfOdd}>奇数再+</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.incrementAsync}>异步+</button>
            </div>

        );
    }
}

export default Count;